// import Error from '../../ui/Error'
import Form from '../../ui/Form'
import FormRow from '../../ui/FormRow'
import Input from '../../ui/Input'
import Spinner from '../../ui/Spinner'
import { useSettings } from './useSettings'
import { useUpdateSettings } from './useUpdateSettings.js'

function UpdateSettingsForm() {
	const {
		isLoading,
		settings: {
			maxBookingLength,
			minBookingLength,
			maxGuestsPerBooking,
			breakfastPrice
		} = {},
		error
	} = useSettings()
	const { updateSettings, isUpdating } = useUpdateSettings()
	console.log(isUpdating)

	function handleSettings(value, key) {
		console.log(value, key)
		if (!value) return
		updateSettings({ [key]: value })
	}

	// if (error) return <Error message={error.message} />

	if (isLoading) return <Spinner />

	return (
		<Form>
			<FormRow label='Minimum nights/booking'>
				<Input
					type='number'
					id='min-nights'
					defaultValue={minBookingLength}
					disabled={isUpdating}
					onBlur={(e) => handleSettings(e.target.value, 'minBookingLength')}
				/>
			</FormRow>
			<FormRow label='Maximum nights/booking'>
				<Input
					type='number'
					id='max-nights'
					defaultValue={maxBookingLength}
					disabled={isUpdating}
					onBlur={(e) => handleSettings(e.target.value, 'maxBookingLength')}
				/>
			</FormRow>
			<FormRow label='Maximum guests/booking'>
				<Input
					type='number'
					id='max-guests'
					defaultValue={maxGuestsPerBooking}
					disabled={isUpdating}
					onBlur={(e) => handleSettings(e.target.value, 'maxGuestsPerBooking')}
				/>
			</FormRow>
			<FormRow label='Breakfast price'>
				<Input
					type='number'
					id='breakfast-price'
					defaultValue={breakfastPrice}
					disabled={isUpdating}
					onBlur={(e) => handleSettings(e.target.value, 'breakfastPrice')}
				/>
			</FormRow>
		</Form>
	)
}

export default UpdateSettingsForm
